import React from "react";
import { Alert, Tabs } from 'antd';
import { MehOutlined } from '@ant-design/icons'
import styles from '../zyd/yd.module.css'
export default function Zlkb() {
    const items = [
        {
            key: '1',
            label: <div className={styles.zlkbc}><div><MehOutlined className={styles.zlkbd}/></div><div><p>品质分小于60分 商品分</p><p>0(品质差，限售风险高)</p></div></div>,
            children: <div>
                <h3>问题分析</h3>
                <div>
                    <p>商品存在严重的质量问题，可能导致客户投诉、退货率上升，甚至影响品牌形象。</p>
                </div>
                <h3>改进建议</h3>
                <div>
                    <p>1.立即停止销售该商品，进行全面的质量检查。</p>
                    <p>2.联系供应商，了解问题根源，要求提供解决方案。</p>
                    <p>3.对已售出的商品进行召回处理，避免进一步的风险。</p>
                </div>
            </div>,
        },
        {
            key: '2',
            label: <div className={styles.zlkbc}><div><MehOutlined className={styles.zlkbd}/></div><div><p>品质分小于60分 商品分</p><p>0(品质较差，请尽快优化)</p></div></div>,
            children: <div>
                <h3>问题分析</h3>
                <div>
                    <p>商品质量低于标准，虽然没有达到最差的程度，但仍然需要引起重视。</p>
                </div>
                <h3>改进建议</h3>
                <div>
                    <p>1.分析客户反馈，找出具体的问题点。</p>
                    <p>2.与生产部门沟通，调整生产工艺或材料，提高产品质量。</p>
                    <p>3.加强对商品的质检流程，确保每一件商品都符合标准。</p>
                </div>
            </div>,
        },
        {
            key: '3',
            label: <div className={styles.zlkbc}><div><MehOutlined className={styles.zlkbd}/></div><div><p>品质分小于60分 商品分</p><p>0(品质一般，多关注售后)</p></div></div>,
            children: <div>
                <h3>问题分析</h3>
                <div>
                    <p>商品质量处于中等水平，虽然没有明显的缺陷，但在售后服务方面可能存在不足。</p>
                </div>
                <h3>改进建议</h3>
                <div>
                    <p>1.提升售后服务团队的专业能力，提供更优质的客户服务。</p>
                    <p>2.建立完善的售后服务体系，包括退换货政策、维修服务等。</p>
                    <p>3.定期收集客户反馈，及时解决客户在使用过程中遇到的问题。</p>
                </div>
            </div>,
        },
        {
            key: '4',
            label: <div className={styles.zlkbc}><div><MehOutlined className={styles.zlkbd}/></div><div><p>品质分小于60分 商品分</p><p>0(请继续提高品质)</p></div></div>,
            children: <div>
                <h3>问题分析</h3>
                <div>
                    <p>商品质量有待提升，虽然目前没有出现严重的问题，但仍有改进的空间。。</p>
                </div>
                <h3>改进建议</h3>
                <div>
                    <p>1.持续关注市场动态和消费者需求，不断优化产品设计。</p>
                    <p>2.引入先进的生产设备和技术，提高生产效率和产品质量。</p>
                    <p>3.加强员工培训，提升整个团队的质量意识和专业技能。</p>
                </div>
            </div>,
        },
    ];
    return (
        <React.Fragment>
            <div>
                <div className={styles.zlkba}>
                    <div>
                        <h4>近90天品质售后率</h4>
                        <h3>0.00%</h3>
                    </div>
                    <div>
                        <h4>近90天店铺评价均分</h4>
                        <h3>0.00%</h3>
                    </div>
                    <div>
                        <h4>品质售后货值(CNY)</h4>
                        <h3>￥286.00</h3>
                    </div>
                    <div>
                        <h4>质检退货运费(CNY)</h4>
                        <h3>￥286.00</h3>
                    </div>
                </div>
                <div className={styles.zlkbb}>
                    <Alert
                        description="为扶持卖好货的商家，平台可在[售后服务规划]基础上，视情况给予商家部分质量售后责任减免。即平台有权对属于商家责任的质量售后，根据不同商品品质分作不同处理，具体以平台实际判定为准"
                        type="warning"
                        showIcon
                        closable
                        style={{ fontSize: '12px' }}
                    />
                </div>
                <div>
                    <Tabs type="card" defaultActiveKey="1" items={items} />
                </div>
            </div>
        </React.Fragment>
    )
}